<template>
  <div>
    <el-scrollbar :height="height + 'px'">
      <el-aside>
        <el-row>
          <el-col>
            <el-menu
              active-text-color="#ffd04b"
              background-color="#545c64"
              class="el-menu-vertical-demo"
              :default-active="$route.meta.parent || $route.path"
              text-color="#fff"
              router
              :collapse="!isCollapse"
            >
              <el-menu-item index="/Home/Mainpage">
                <el-icon> <house /> </el-icon><span>首页</span>
              </el-menu-item>
              <el-sub-menu v-for="(item, index) in mest" :key="index" :index="'/Home/' + item.path">
              <template #title>
                <el-icon :class="'iconfont ' + item.meta.icon"></el-icon>
                <span>{{ item.meta.title }}</span>
              </template>
                <div v-for="item2 in item.children" :key="item2.name">
                  <el-menu-item v-if="!item2.meta.hidden"  :index="'/Home/' + item.path + '/' + item2.path">
                    {{ item2.meta.title }}
                  </el-menu-item>
                </div>
            </el-sub-menu>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
    </el-scrollbar>
  </div>
</template>
<script>
  import { House } from "@element-plus/icons-vue";
  import mest from "@/router/page";
  export default {
    components: {
      House,
    },
    setup() {
      return {
        mest,
        House,
      };
    },
    data() {
      return {
        height: 786, //默认高度
        isCollapse: true, //菜单栏默认展开
      };
    },
    props: ["isCollapse"],
    //获取左边菜单栏的高度
    mounted() {
      let that = this;
      this.height = window.innerHeight;
      window.onresize = () => {
        that.height = window.innerHeight;
      };
    },
  };
</script>
<style lang="less" scoped>
  .el-aside {
    width: auto;
    .el-menu-vertical-demo:not(.el-menu--collapse) {
      width: 200px;
      min-height: 400px;
    }
    .el-menu {
      //去除白边
      border: 0px;
    }
  }
</style>
